/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div>
      <div class="fixed-bar">
        <div class="item-title">
          <router-link class="back" :to="{name:'shipping_list'}" title="返回列表">
            <i class="fa fa-arrow-circle-o-left"></i>
          </router-link>
          <div class="subject">
            <h3>物流管理 - 添加物流</h3>
            <h5>网站系统物流索引和管理</h5>
          </div>
        </div>
      </div>
      <form :model="form" class="form-horizontal" id="handleposition" method="post">
        <div class="ncap-form-default">
          <dl class="row">
            <dt class="tit">
              <label>
                <em>*</em>物流公司名字
              </label>
            </dt>
            <dd class="opt">
              <input
                v-model="form.shipping_name"
                type="text"
                name="title"
                id="title"
                value
                class="input-txt"
              />
              <p
                class="err-msg"
                v-if="errResult.shipping_name && !form.shipping_name"
              >{{errResult.shipping_name}}</p>
              <span class="err" id="err_title"></span>
              <p class="notic">物流公司大写首字母：如圆通快递：YTKD</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>
                <em>*</em>快递公司编码
              </label>
            </dt>
            <dd class="opt">
              <input
                v-model="form.shipping_code"
                type="text"
                name="title"
                id="title"
                value
                class="input-txt"
              />
              <p
                class="err-msg"
                v-if="errResult.shipping_code && !form.shipping_code"
              >{{errResult.shipping_code}}</p>
              <span class="err" id="err_title"></span>
              <p class="notic">物流公司编码由拼音组成,不得含有英文以外的字符。</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>简短描述</label>
            </dt>
            <dd class="opt">
              <textarea
                v-model="form.shipping_desc"
                placeholder
                name="description"
                rows="6"
                class="tarea"
              ></textarea>
              <p class="notic">简短描述</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>
                <em>*</em>物流图片图标
              </label>
            </dt>
            <dd class="opt">
              <el-upload
                class="avatar-uploader"
                :action="apiHead + '/mall/upload?type=shipping'"
                :show-file-list="false"
                :on-success="handleUpload"
                :before-upload="beforeAvatarUpload"
              >
                <el-image
                  v-if="form.shipping_logo"
                  :src="form.shipping_logo"
                  style="width: 100px; height: 100px"
                ></el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <p
                class="err-msg"
                v-if="errResult.shipping_logo && !form.shipping_logo"
              >{{errResult.shipping_logo}}</p>
              <p class="notic">请上传图片格式文件</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>模板宽度</label>
            </dt>
            <dd class="opt">
              <input
                v-model="form.template_width"
                type="text"
                name="title"
                id="title"
                value
                class="input-txt"
              />
              <span class="err" id="err_title"></span>
              <p class="notic">运单宽度，单位为毫米(mm)</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>模板高度</label>
            </dt>
            <dd class="opt">
              <input
                v-model="form.template_height"
                type="text"
                name="title"
                id="title"
                value
                class="input-txt"
              />
              <span class="err" id="err_title"></span>
              <p class="notic">运单高度，单位为毫米(mm)</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>偏移量X</label>
            </dt>
            <dd class="opt">
              <input
                v-model="form.template_offset_x"
                type="text"
                name="title"
                id="title"
                value
                class="input-txt"
              />
              <span class="err" id="err_title"></span>
              <p class="notic">运单模板左偏移量，单位为毫米(mm)</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>偏移量Y</label>
            </dt>
            <dd class="opt">
              <input
                v-model="form.template_offset_y"
                type="text"
                name="title"
                id="title"
                value
                class="input-txt"
              />
              <span class="err" id="err_title"></span>
              <p class="notic">运单模板上偏移量，单位为毫米(mm)</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>
                <em>*</em>模板图片
              </label>
            </dt>
            <dd class="opt">
              <el-upload
                :action="apiHead + '/mall/upload?type=shipping'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <!-- <el-input size="mini" v-model="form.logo"></el-input> -->
                <el-button size="mini" type="primary">点击上传</el-button>
                <p
                  class="err-msg"
                  v-if="errResult.template_img && !form.template_img"
                >{{errResult.template_img}}</p>
                <div slot="tip" class="el-upload__tip">请上传扫描好的运单图片，图片尺寸必须与快递单实际尺寸相符</div>
              </el-upload>
              <span class="err" id="err_template_img"></span>
              <!-- <p class="notic">请上传扫描好的运单图片，图片尺寸必须与快递单实际尺寸相符</p> -->
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">选择打印项</dt>
            <dd class="opt">
              <div>
                <el-select
                  size="small"
                  v-model="value"
                  clearable
                  placeholder="请选择标签"
                  @change="selectChanged(value)"
                >
                  <el-option v-for="item in options" :key="item.value" :value="item.value"></el-option>
                </el-select>
                <el-button
                  slot="append"
                  type="danger"
                  icon="el-icon-delete"
                  size="small"
                  @click="deleteDivEl"
                ></el-button>
              </div>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">打印项偏移校正</dt>
            <dd class="opt">
              <div
                class="waybill_area"
                :style="{overflow: 'auto', position: 'relative', width: 840 + 'px', height: 480 + 'px'}"
              >
                <div
                  class="waybill_back"
                  :style="{position: 'relative', width: form.template_width ? form.template_width : 840 + 'px', height: form.template_height ? form.template_height : 480 + 'px'}"
                >
                  <img
                    id="tp-img"
                    :src="form.template_img"
                    style="width: 840px; height: 480px;"
                    alt
                  />
                </div>
                <div
                  v-html="form.html_encode"
                  class="waybill_design"
                  :style="{position: 'absolute', left: form.template_offset_x ? form.template_offset_x : 0 + 'px', top: form.template_offset_y ? form.template_offset_y : 0 + 'px', width: form.template_width ? form.template_width : 840 + 'px', height: form.template_height ? form.template_height : 480 + 'px'}"
                ></div>
                <!-- <div class="waybill_design" style="position: absolute; left: 0px; top: 0px; width: 840px; height: 480px;">
									<div class="item" style="left: 134px; top: 101px; width: 79px; height: 20px; z-index: 26;">
										<pre>发货点-联系人</pre>
									</div>
                </div>-->
              </div>
            </dd>
          </dl>

          <div class="bot">
            <el-button type="primary" @click="onSubmit()" :loading="isLoading">确认提交</el-button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "发货点-名称"
        },
        {
          value: "发货点-联系人"
        },
        {
          value: "发货点-电话"
        },
        {
          value: "发货点-省份"
        },
        {
          value: "发货点-城市"
        },
        {
          value: "发货点-区县"
        },
        {
          value: "发货点-手机"
        },
        {
          value: "发货点-详细地址"
        },
        {
          value: "收件人-姓名"
        },
        {
          value: "收件人-手机"
        },
        {
          value: "收件人-电话"
        },
        {
          value: "收件人-省份"
        },
        {
          value: "收件人-城市"
        },
        {
          value: "收件人-区县"
        },
        {
          value: "收件人-邮编"
        },
        {
          value: "收件人-详细地址"
        },
        {
          value: "时间-年"
        },
        {
          value: "时间-月"
        },
        {
          value: "时间-日"
        },
        {
          value: "时间-当前日期"
        },
        {
          value: "订单-订单号"
        },
        {
          value: "订单-备注"
        },
        {
          value: "订单-配送费用"
        }
      ],
      value: "",
      id: this.$route.params.id,
      form: {},
      divel: null,
      errResult: {},
      isLoading: false
      // positionX: 0,
      // positionY: 0,
    };
  },
  components: {},
  created() {
    if (typeof this.$route.params.id != "undefined") {
      //编辑
      this.getShipping();
    } else {
      //添加
    }
  },
  methods: {
    getShipping() {
      var that = this;
      this.request
        .get("/seller/shipping", {
          params: {
            shipping_id: that.id
          }
        })
        .then(function(res) {
          that.form = res;
          that.editElement();
        });
    },
    onSubmit() {
      this.isLoading = true;
      var that = this;
      //that.form.html_encode = document.getElementsByClassName("waybill_design")[0].innerHTML
      if (typeof this.$route.params.id != "undefined") {
        this.request.put("/seller/shipping", that.form).then(function(res) {
          if (res.status == 1) {
            that.$message({
              message: "保存成功",
              type: "success",
              onClose: function() {
                that.$router.push({
                  name: "shipping_list"
                });
              }
            });
          } else if (res.status == -1) {
            that.$message.error("参数错误");
            that.errResult = res.result;
          } else {
            that.$message.error(res.msg);
          }
          that.isLoading = false;
        });
      } else {
        this.request.post("/seller/shipping", that.form).then(function(res) {
          if (res.status == 1) {
            that.$message({
              message: "保存成功",
              type: "success",
              onClose: function() {
                that.$router.push({
                  name: "shipping_list"
                });
              }
            });
          } else if (res.status == -1) {
            that.$message.error("参数错误");
            that.errResult = res.result;
          } else {
            that.$message.error(res.msg);
          }
          that.isLoading = false;
        });
      }
    },
    handleUpload(res) {
      this.form.shipping_logo = res.result;
      this.$forceUpdate();
    },
    handleAvatarSuccess(res) {
      this.form.template_img = res.result;
      this.$forceUpdate();
    },
    beforeAvatarUpload(file) {
      const isPic =
        file.type === "image/gif" ||
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isPic) {
        this.$message.error("上传图片只能是 JPG、JPEG、PNG、GIF 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isPic && isLt2M;
    },
    editElement() {
      var that = this;
      this.$nextTick(() => {
        var list = document.getElementsByClassName("item");
        for (let i = 0; i < list.length; i++) {
          list[i].contentEditable = true;
          //list[i].classList.remove("selected");
          list[i].addEventListener("mousedown", function(e) {
            let odiv = this; //获取目标元素
            console.log(e);
            //算出鼠标相对元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            this.onmousemove = e => {
              //鼠标按下并移动的事件
              //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
              let left = e.clientX - disX;
              let top = e.clientY - disY;

              //绑定元素位置到positionX和positionY上面
              that.positionX = top;
              that.positionY = left;

              //移动当前元素
              odiv.style.left = left + "px";
              odiv.style.top = top + "px";
            };
            this.onmouseup = e => {
              this.onmousemove = null;
              this.onmouseup = null;
              that.form.html_encode = document.getElementsByClassName(
                "waybill_design"
              )[0].innerHTML;
              //e.target.classList.remove("selected");
              //e.target.classList.add('selected');
              list[i].classList.add("selected");
              for (let j = i + 1; j < list.length; j++) {
                list[j].classList.remove("selected");
              }
              for (let z = 0; z < i - 1; z++) {
                list[z].classList.remove("selected");
              }
              that.editElement();
            };
          });
        }
      });
    },
    selectChanged(val) {
      //var that = this;
      let divElement =
        '<div class="item" style="left: 0px; top: 0px; width: 79px; height: 20px;"><pre>' +
        val +
        '</pre><div class="resize"></div></div>';
      if (this.form.html_encode) {
        this.form.html_encode = this.form.html_encode + divElement;
      } else {
        this.form.html_encode = divElement;
      }
      this.editElement();
      console.log(this.form.html_encode);
    },
    deleteDivEl() {
      var d = document.getElementsByClassName("selected");
      for (let i = 0; i < d.length; i++) {
        d[i].remove();
      }
      this.form.html_encode = document.getElementsByClassName(
        "waybill_design"
      )[0].innerHTML;
      this.editElement();
    }
  }
};
</script>

<style scoped>
.avatar-uploader-icon {
  line-height: 100px;
}
>>> .el-button--danger {
  margin-left: 120px;
  background-color: #f56c6c;
  border-color: #f56c6c;
}

>>> .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 30px;
}

>>> .waybill_design .item {
  background-color: #fef5e6;
  width: 90px;
  height: 20px;
  padding: 1px 5px 4px 5px !important;
  border-color: #ffbebc;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  cursor: move;
  position: absolute;
  left: 0;
  top: 0;
}

>>> .waybill_design .item pre {
  height: 100%;
  float: left;
  padding: 0;
  margin: 0;
  border: 0;
  cursor: move;
}

>>> .waybill_design textarea {
  padding-left: 0px;
  margin: 0px;
  font-size: 12px;
  resize: none;
  outline: none;
  overflow: hidden;
  border: none;
}

>>> .waybill_design .resize {
  height: 6px;
  width: 6px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  overflow: hidden;
  cursor: nw-resize;
  background-color: #aaaaaa;
}

>>> .waybill_design .selected {
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
  border: 1px solid #ff6600;
}
</style>
